<h1 mat-dialog-title>{{'home.newBook.title' | translate}}</h1>
<div mat-dialog-content>
    <p>{{'home.newBook.content.title' | translate}}</p>
    <ul>
        <li><code>https://github.com/gnu4cn/ccna60d[.git]</code></li>
        <li><code>git@github.com:gnu4cn/ccna60d[.git]</code></li>
    </ul>
    <p>{{'home.newBook.content.content' | translate}}</p>
    <form>
        <!-- bookUriInput -->
        <mat-form-field fxFill style="font-size: 16px">
            <mat-label>{{'home.newBook.repo.label' | translate}}</mat-label>
            <input matInput [formControl]="uriInputControl" required [(ngModel)]="newBook.bookUri" />
            <mat-error *ngIf="uriInputControl.invalid">{{getErrorMsg()}}</mat-error>
        </mat-form-field>

        <!-- bookCateListInput -->
        <mat-form-field fxFill style="font-size: 16px">
            <mat-label>{{'home.newBook.cateList.label.prefix' | translate}}(<b>{{'home.newBook.cateList.label.required' | translate}}</b>)</mat-label>
            <mat-chip-list #chipList aria-label="Book cate selection">
                <mat-chip [selectable]="selectable" [removable]="removable" *ngFor="let cate of newBook.cateList"
                        (removed)="remove(cate)">
                    {{cate.name}}
                    <ion-icon matChipRemove *ngIf="removable" name="close-circle"></ion-icon>
                </mat-chip>
                <input placeholder="{{'home.newBook.cateList.input.placeholder' | translate}}"
                       #cateInput
                       [formControl]="cateListInputControl"
                       [matAutocomplete]="auto"
                       [matChipInputFor]="chipList"
                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                       (matChipInputTokenEnd)="add($event)" />
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                <mat-option *ngFor="let cate of filteredCateList | async" [value]="cate.name">
                    {{cate.name}}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </form>
</div>
<div mat-dialog-actions>
    <button mat-button matDialogClose>{{'home.newBook.actions.cancel' | translate}}</button>
    <button mat-button [disabled]="!uriInputControl.valid || newBook.cateList.length === 0" 
            [mat-dialog-close]="newBook">{{'home.newBook.actions.add' | translate}}
    </button>
</div>
